<template>
  <my-navigation-bar :my-style='style' class="my-navigation">控制台</my-navigation-bar>
  <text class="icon-zuojiantou navbar" @tap="goBack" :style="flag?{marginTop: '36rpx'}:''"></text>
  <view v-if="flag">
    <view class="big-container">
      <view class="main-box" :style="flag?{marginTop: '180rpx'}:''">
        <view class="banner">
          <!-- <image src="../../static/image/control/17.jpg" mode=""></image> -->
          <video autoplay src="https://mp-f7e8bd69-1984-49bf-803a-8c3a61b58a13.cdn.bspapp.com/cloudstorage/369affb3-4ba6-4236-b311-39185baa6fb4.mp4" controls="{{false}}" id="myvideo" @tap="changeToHori"></video>
          <!-- <text class="icon-24gl-playCircle"></text> -->
        </view>
        <view class="button-box">
          <view class="item-box">
            <view class="img-box">
              <image src="../../static/image/index/boy.png" mode=""></image>
            </view>
            <text>坐姿检测</text>
          </view>
          <view class="item-box">
            <view class="img-box">
              <image src="../../static/image/index/face.png" mode=""></image>
            </view>
            <text>人脸检测</text>
          </view>
          <view class="item-box">
            <view class="img-box">
              <image src="../../static/image/index/tired.png" mode=""></image>
            </view>
            <text>疲劳检测</text>
          </view>
        </view>
      </view>
      <view class="consumption">
        <view class="left-box">
          <text class="flow">2000.87<text class="sub">MB</text> </text>
          <text>已用流量</text>
        </view>
        <view class="right-box">
          |<text class="icon-xiangyoujiantou"></text>
        </view>
      </view>
      <view class="info-box">
        <view class="top-box">
          <view class="img-box">
            <image src="../../static/image/control/eye.png" mode=""></image>
          </view>
          <view class="desc-box">
            <text class="name">A.0G2N7 <text class="icon-zhengque"></text> </text>
            <text class="time">2023.03.08 10:10:11</text>
          </view>
        </view>
        <view class="bottom-box">
          <view class="item">
            <text class="item-name">设备ID</text>
            <text class="type">85241052</text>
          </view>
          <view class="item">
            <text class="item-name">设备集名称</text>
            <text class="type">摄像头-M784</text>
          </view>
          <view class="item">
            <text class="item-name">设备类型</text>
            <text class="type">视频监控</text>
          </view>
        </view>
      </view>
    </view>
  </view>
   <view :style="{transform: state.coverTransform, transition: state.coverTransition}" @touchmove="moveH" @touchstart="startH" @touchend="endH" v-else>
   <scroll-view scroll-y="true" class="scroll-box">
     <view class="big-container">
       <view class="main-box" :style="flag?{marginTop: '180rpx'}:''">
         <view class="banner">
           <!-- <image src="../../static/image/control/17.jpg" mode=""></image> -->
           <video src="https://mp-f7e8bd69-1984-49bf-803a-8c3a61b58a13.cdn.bspapp.com/cloudstorage/369affb3-4ba6-4236-b311-39185baa6fb4.mp4" autoplay controls="{{false}}" id="myvideo"></video>
           <!-- <text class="icon-24gl-playCircle"></text> -->
         </view>
         <view class="button-box">
           <view class="item-box">
             <view class="img-box">
               <image src="../../static/image/index/boy.png" mode=""></image>
             </view>
             <text>坐姿检测</text>
           </view>
           <view class="item-box">
             <view class="img-box">
               <image src="../../static/image/index/face.png" mode=""></image>
             </view>
             <text>人脸检测</text>
           </view>
           <view class="item-box">
             <view class="img-box">
               <image src="../../static/image/index/tired.png" mode=""></image>
             </view>
             <text>疲劳检测</text>
           </view>
         </view>
       </view>
       <view class="consumption">
         <view class="left-box">
           <text class="flow">2000.87<text class="sub">MB</text> </text>
           <text>已用流量</text>
         </view>
         <view class="right-box">
           |<text class="icon-xiangyoujiantou"></text>
         </view>
       </view>
       <view class="info-box">
         <view class="top-box">
           <view class="img-box">
             <image src="../../static/image/control/eye.png" mode=""></image>
           </view>
           <view class="desc-box">
             <text class="name">A.0G2N7 <text class="icon-zhengque"></text> </text>
             <text class="time">2023.03.08 10:10:11</text>
           </view>
         </view>
         <view class="bottom-box">
           <view class="item">
             <text class="item-name">设备ID</text>
             <text class="type">85241052</text>
           </view>
           <view class="item">
             <text class="item-name">设备集名称</text>
             <text class="type">摄像头-M784</text>
           </view>
           <view class="item">
             <text class="item-name">设备类型</text>
             <text class="type">视频监控</text>
           </view>
         </view>
       </view>
     </view>
   </scroll-view>
  </view>
</template>

<script setup>
  import myNavigationBarVue from '../../components/my-navigation-bar/my-navigation-bar.vue';
  import {
    computed,
    onMounted
  } from "vue";
  import useBounceFunc from "../../hooks/bounce.js";
  const {state, moveH, startH, endH} = useBounceFunc();
  const flag = computed(() => {
    return getApp().globalData.isIphoneX;
  })
  const style = {
    textAlign: 'center',
    paddingLeft: 0,
    backgroundColor: "#F2F2F2"
  };
  let videoCtx = null;
  let flag1 = false;
  onMounted(() => {
    videoCtx = uni.createVideoContext("myvideo")
  })
  const goBack = (e) => {
    uni.navigateBack()
  }
  const changeToHori = () => {
    if(flag1){
      videoCtx.exitFullScreen();
      flag1 = false;
    }else{
      videoCtx.requestFullScreen({ direction: 90 }); 
      flag1 = true;
    }
  }
</script>

<style scoped lang="scss">
  .navbar {
    position: fixed;
    top: 63rpx;
    left: 39rpx;
    z-index: 100;
    font-size: 48rpx;
    font-weight: 500;
    color: #515151;
  }
.scroll-box{
  height: 100vh;
}
  .big-container {
    background-color: #F2F2F2;
    padding-bottom: 30rpx;

    .main-box {
      margin-top: 150rpx;

      .banner {
        position: relative;
        width: 670rpx;
        height: 380rpx;
        margin: 0 auto;

        video {
          width: 100%;
          height: 100%;
          border-radius: 30rpx;
        }

        .icon-24gl-playCircle {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 90rpx;
          color: #DBDBDB;
        }
      }

      .button-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 30rpx 40rpx 0;
        color: #626262;
        box-sizing: border-box;

        .item-box {
          box-sizing: border-box;
          width: 100%;
          margin: 0 auto;
          border: 1px solid #999;
          border-radius: 100rpx;
          padding: 20rpx 60rpx;
          background-color: #fff;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          &:not(:first-child){
            margin-top: 15rpx;
          }
          .img-box {
            width: 80rpx;
            height: 80rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }

          text {
            margin-left: 30rpx;
            font-size: 39rpx;
            font-weight: 550;
            color: #111;
          }
        }


      }

    }

    .consumption {
      width: 670rpx;
      height: 160rpx;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: #E5F6FF;
      border: 1px solid #aaa;
      border-radius: 30rpx;
      margin-top: 35rpx;

      .left-box {
        margin-left: 115rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        color: #3399FF;

        .flow {
          font-size: 45rpx;
          font-weight: 700;

          .sub {
            font-size: 26rpx;
            margin-left: 30rpx;
          }
        }
      }

      .right-box {
        color: #2582CD;
        font-weight: 700;
        position: relative;

        .icon-xiangyoujiantou {
          position: absolute;
          top: 7rpx;
          right: -33rpx;
          font-size: 36rpx;
        }
      }
    }

    .info-box {
      width: 670rpx;
      margin: 35rpx auto 60rpx;
      border: 1px solid #aaa;
      border-radius: 30rpx;
      background-color: #fff;

      .top-box {
        display: flex;
        justify-content: flex-start;
        border-bottom: 1px solid #eee;
        padding: 50rpx 0 50rpx 60rpx;

        .img-box {
          width: 150rpx;
          height: 150rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .desc-box {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 37rpx;

          .name {
            font-size: 37rpx;
            font-weight: 600;

            .icon-zhengque {
              font-weight: normal;
              display: inline-block;
              font-size: 40rpx;
              color: #80B7F9;
            }
          }

          .time {
            margin-top: 10rpx;
            font-size: 24rpx;
            color: #aaa;

          }
        }
      }

      .bottom-box {
        padding: 46rpx 40rpx;

        .item {
          display: flex;
          justify-content: space-between;
          font-weight: 700;

          &:not(:first-child) {
            margin-top: 45rpx;
          }

          .item-name {
            font-size: 36rpx;
          }

          .type {
            font-size: 28rpx;
            color: #999999;
          }
        }
      }
    }
  }
</style>
